<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * MemberView.vue
-->

<template>
  <div class="body">
    <div class="title">会员列表</div>
    <Table   ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="关键字">
            <el-input style="width:150px" v-model="params.key" placeholder="搜索关键字" clearable />
          </el-form-item>
          <el-form-item label="地址">
            <el-input style="width:150px" v-model="params.address" placeholder="请输入地址" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input style="width:150px" v-model="params.tel" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="时间查询">
            <el-date-picker v-model="dateValue" @change="(e: any) => dateChange(e, params)" value-format="YYYY-MM-DD"
              type="daterange" range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期" />
          </el-form-item>
          <el-form-item label="报修状态">
            <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
              <el-option label="处理完成" value="3" />
              <el-option label="正在处理" value="2" />
              <el-option label="等待处理" value="1" />
              
            </el-select>
          </el-form-item>
          <el-form-item label="报修类型">
            <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择类型">
              <el-option label="租户2" value="2" />
              <el-option label="业主1" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="居民">
            <el-input style="width:150px" v-model="params.userid" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- //性别处理 -->
      <template #sex="{ scope }">
        <div > {{ scope.row.sex == 1 ? '男' : '女' }}</div>
      </template>
        <!-- 管理楼栋 -->
      <template #building="{ scope }">
        <div v-for="item in scope.row.building" :key="item.id">{{ item.building }}</div>
      </template>
      
      <template #buttons="{ deleteAllHandle }">
        <el-button class="del" @click="deleteAllHandle" type="danger">批量删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <!-- <el-button @click="edit(scope.row)" type="primary">修改</el-button> -->
        <el-button class="delete" @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>
  </div>
</template>
<script lang='ts' setup>
import Table from '../../components/table/TableView.vue'
import { tableConfig,editUser } from './MemberView'
import { ref } from 'vue'
// import { DataInfo } from '../../service/userinfo/type';


// const isAdd = ref(false);



// const edit = (item: DataInfo) => {
//   Object.assign(editUser, item);
//   isAdd.value = true;
// }


//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();
  const dateValue = ref("");
const dateChange = (e: any, params: any) => {
  if (e == null) {
    params.begindate = null;
    params.enddate = null;
  }
  else {
    params.begindate = e[0];
    params.enddate = e[1];
  }

}

</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
</style>